﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Full Layout - jQuery EasyUI Demo</title>
    <link href="../js/themes/default/easy_ui.css" rel="stylesheet" type="text/css" />
    <link href="../js/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="../css/demo.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../js/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
          $(function () {
              loadData();
          })
          var rowId;
          function userGroupSelect() {
              var ed = $('#tbGrid').datagrid('getEditor', { index: rowId, field: 'userGroup' });
              var t = ed.target.combobox("getValue");
              alert(t);
          }

          var data = [{ "id": "test_1", "text": "test_1" }, { "id": "test_2", "text": "test_2" }, { "id": "test_3", "text": "test_3" }, { "id": "test_4", "text": "test_4" }, { "id": "test_5", "text": "test_5"}];
          function loadData() {
              var param = {
              //                "channelNum": $("#channelNum").val(),
              //                "contactsName": $("#contactsName").val(),
              //                "phone": $("#phone").val(),
              //                "companyName": $("#CompanyName").val()
          };

          $('#tbGrid').datagrid({
              title: '用户列表',
              iconCls: 'icon-save',
              width: '100%',
              height: 'auto',
              nowrap: false,
              striped: true,
              remoteSort: false,
              pagination: true, //分页控件  
              rownumbers: true, //行号  
              columns: [[
                { field: 'userName', title: '用户名', width: 300, align: 'left' },
                { field: 'remarks', title: '备注', width: 300, align: 'left' },
                { field: 'userGroup', title: '所属组', width: 300, align: 'left', resizable: true, editable: false, editor: { type: 'combobox', options: { onSelect: userGroupSelect, valueField: 'id', textField: 'text', data: data} }
                }
                 ]],
              onDblClickCell: function (index, field, value) {
                  var rows = $(this).datagrid('getRows');
                  for (var i = 0; i < rows.length; i++) {
                      $(this).datagrid('endEdit', i);
                  }

                  $(this).datagrid('beginEdit', index);
                  rowId = index;
                  var ed = $(this).datagrid('getEditor', { index: index, field: 'userGroup' });
                  $(ed.target).focus();
              },
              pagination: true,
              rownumbers: true
          });

          var p = $('#tbGrid').datagrid('getPager');

          $(p).pagination({

              pageSize: 10, //每页显示的记录条数，默认为10  

              pageList: [5, 10, 15], //可以设置每页记录条数的列表  

              beforePageText: '第', //页数文本框前显示的汉字  

              afterPageText: '页    共 {pages} 页',

              displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'

          });
      }
      function append() {
          var t = $('#tt');
          var node = t.tree('getSelected');
          t.tree('append', {
              parent: (node ? node.target : null),
              data: [{
                  text: 'new item'
              }]
          });
      }
      function removeit() {
          var node = $('#tt').tree('getSelected');
          $('#tt').tree('remove', node.target);
      }
      function collapse() {
          var node = $('#tt').tree('getSelected');
          $('#tt').tree('collapse', node.target);
      }
      function expand() {
          var node = $('#tt').tree('getSelected');
          $('#tt').tree('expand', node.target);
      }
    </script>
</head>
<body class="easyui-layout">
    <!--左边-->
	<div data-options="region:'west',split:true,title:'用户组'" style="width:150px;padding:10px;">
    <ul id="tt" class="easyui-tree" data-options="
                url: 'tree_data1.json',
                method: 'get',
                animate: true,
                onContextMenu: function(e,node){
                    e.preventDefault();
                    $(this).tree('select',node.target);
                    $('#mm').menu('show',{
                        left: e.pageX,
                        top: e.pageY
                    });
                },
                 onDblClick: function(node){
                    $(this).tree('beginEdit',node.target);
                    },
                onAfterEdit:function(node){
                         alert(node.text);
                    }
            ">
        </ul>
    <div id="mm" class="easyui-menu" style="width: 120px;">
        <div onclick="append()" data-options="iconCls:'icon-add'">
            Append</div>
        <div onclick="removeit()" data-options="iconCls:'icon-remove'">
            Remove</div>
        <div class="menu-sep">
        </div>
        <div onclick="expand()">
            Expand</div>
        <div onclick="collapse()">
            Collapse</div>
    </div>
    </div>
    <!--右边-->
	<div data-options="region:'center',title:''">
    <div id="toolbar" style="padding: 5px; height: auto">
        <div>
            用户名:
            <input type="text" name="txtUserName" id="txtUserName"   value="" />
            <a href="#" class="easyui-linkbutton" iconcls="icon-search">查询</a>
        </div>
    </div>
    <table class="easyui-datagrid" id="tbGrid" data-options="url: 'datagrid_data1.json'" toolbar="#toolbar" singleselect="true">
    </table>
    </div>
</body>
</html>